<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加课表</title>
    <link rel="stylesheet" href="/css/layui.css">
    <link rel="stylesheet" href="/scriptZIP/layui.min.css">
    <link rel="stylesheet" href="/css/item.css">
    <link rel="stylesheet" href="/css/eliminate_timetable.css">
</head>

<body>
    <div id="vue-root">

        <div style="margin-left: 33px;">
            <input id="period" v-model="period" placeholder="请设置起始日期和结束日期" style="padding: 5px;">
        </div>

        <div class="timetable">
            <div style="margin-bottom: 10px;">
                <select v-model="classId">
                    <option disabled="disabled" :value="null">请选择班级</option>
                    <option v-for="lesson in lessons" :key="lesson.id" :value="lesson.id" v-text="lesson.name"></option>
                </select>
            </div>
            <div class="week" v-for="(day,index) in days" :key="index">
                <div class="weeks">
                    <div style="font-weight: bold;">星期{{day}}</div>
                </div>
                <div class="timetable-info" v-for="(o,index1) in data[index]">
                    <p class="del" @click="del(index,index1)">X</p>
                    <select class="choose-course" v-model="o.periodId">
                        <option disabled="disabled" :value="undefined">请选择时段</option>
                        <option v-for="period in periods" :key="period.id" :value="period.id" v-text="period.name">
                        </option>
                    </select>

                    <select class="choose-course" v-model="o.roomId">
                        <option disabled="disabled" :value="undefined">请选择教室</option>
                        <option v-for="room in rooms" :key="room.id" :value="room.id" v-text="room.name">
                        </option>
                    </select>
                    <select class="choose-course" v-model="o.teacherId">
                        <option disabled="disabled" :value="undefined">请选择教师</option>
                        <option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id" v-text="teacher.name">
                        </option>
                    </select>
                    <select class="choose-course"  v-model="o.teacher1Id">
                        <option disabled="disabled" :value="undefined">请选择教师</option>
                        <option v-for="teacher in teachers" :key="teachers.id" :value="teacher.id"
                            v-text="teacher.name">
                        </option>
                    </select>
                    <select class="choose-course"  v-model="o.teacher2Id">
                        <option disabled="disabled" :value="undefined">请选择教师</option>
                        <option v-for="teacher in teachers" :key="teachers.id" :value="teacher.id"
                            v-text="teacher.name">
                        </option>
                    </select>
                    <select class="choose-course" v-model="o.classesId">
                        <option disabled="disabled" :value="undefined">请选择课程</option>
                        <option v-for="related in relateds" :key="related.id" :value="related.id" v-text="related.name">
                        </option>
                    </select>
                </div>
                <div class="timetable-info">
                    <button @click="add(index)">添加</button>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div class="offer" @click="submit">立即提交</div>
                    <div class="return" onclick="history.back()">取消</div>
                </div>
            </div>
        </div>

    </div>

    <script src="/scriptZIP/qs.min.js"></script>
    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>
    <script src="/scriptZIP/dayjs.min.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="/js/common.js"></script>

    <script>
        var schoolId = top_params().id;
        var today = dayjs(dayjs().format('YYYY-MM-DD'));
        var agentId=localStorage.getItem('agentId')
        var app = new Vue({
            el: '#vue-root',
            data: {
                days: '日一二三四五六'.split(''),
                rooms: [],
                periods: [],
                relateds: [],
                teachers: [],
                lessons: [], // 班级列表
                classId: null, // 当前选中的班级ID
                data: [[], [], [], [], [], [], []],
                period: null
            },
            created: function () {
                axios.get('/pc/classes/all/' + schoolId).then(function (res) {
                    this.lessons = res.data;
                }.bind(this));
                axios.get('/pc/room/all/' + schoolId).then(function (res) {
                    this.rooms = res.data;
                }.bind(this));
                axios.get('/pc/lesson/period/' + schoolId).then(function (res) {
                    this.periods = res.data.map(function (it) {
                        return { id: it.id, name: it.startTime + ' - ' + it.endTime };
                    });
                }.bind(this));

                // 从 sessionStorage 恢复 classId
                if (sessionStorage.classId) {
                    this.classId = sessionStorage.classId;
                }
            },
            watch: {
                classId: function (newValue, oldValue) {
                    sessionStorage.classId = newValue;
                    this.getData2();
                }
            },
            methods: {
                add: function (index) {
                    this.data[index].push({});
                },
                submit: function () {
                    if (!this.period) {
                        alert('请设置起始日期和结束日期')
                        return;
                    }
                    var a = this.period.split(' - ');
                    if (dayjs(a[0]).isBefore(today)) {
                        alert('开始日期应在今天之后');
                        return;
                    }

                    this.data.forEach(function (it, i) {
                        it.forEach(function (o) {
                            if (!o.periodId || !o.roomId) {
                                alert('请填写完整');
                                throw '';
                            }
                        });
                    });

                    axios.post('/pc/lesson/weekly/' + this.classId + '?startDate=' + a[0] + '&endDate=' + a[1],
                        this.data).then(function (res) {
                            alert('成功');
                            history.back();
                        });
                },
                del: function (index, index1) {
                    if (confirm('确认删除？'))
                        this.data[index].splice(index1, 1);
                },
                getData2: function () {
                    if (!this.classId) return;
                    axios.get('/pc/classes/' + this.classId).then(function (res) {
                        // axios.get('/pc/teacher/all/' + schoolId).then(function (res1) {
                        //     var arr = []
                        //     res1.data.forEach(item => {
                        //         if (item.id == res.data.teacherId) {
                        //             arr.push(item)
                        //         }
                        //     });
                        //     this.teachers = arr
                        // }.bind(this));
                        if (res.data.personCharge && res.data.personCharge.length > 0) {
            // 如果班级有配置授课老师，获取这些特定的授课老师
            axios.get('/pc/teacher/all/' + schoolId).then(function (res1) {
                var arr = []
                res1.data.forEach(item => {
                    // 检查该老师是否在授课老师数组中
                    if (res.data.personCharge.includes(item.id)) {
                        arr.push(item)
                    }
                });
                this.teachers = arr;
            }.bind(this));
        } else {
            // 如果没有配置授课老师，获取所有老师
            axios.get('/pc/teacher/all/' + schoolId).then(function (res1) {
                this.teachers = res1.data;
            }.bind(this));
        }
                        axios.get('/pc/room/all/' + schoolId).then(function (res1) {
                            var arr = []
                            res1.data.forEach(item => {
                                if (item.id == res.data.classroom) {
                                    arr.push(item)
                                }
                            });
                            this.rooms = arr
                        }.bind(this));
                        axios.get('/pc/course/all/' + agentId).then(function (res1) {
                            var arr = []
                            res1.data.forEach(item => {
                                if (item.id == res.data.related) {
                                    arr.push(item)
                                }
                            });
                            this.relateds = arr;
                        }.bind(this));
                    }.bind(this));
                }
            }
        });

        laydate.render({
            elem: '#period',
            type: 'date',
            format: 'yyyy-MM-dd',
            range: true,
            done: function (value, date, endDate) {
                app.period = value;
            }
        });
    </script>

</body>

</html>
